<template>
	<view class="container">
		<view class="wrap">
			<view class="list-wrap" v-if='list.length > 0'>
				<view class="list-item" v-for="(item,index) in list" :key="index" @tap='toDetail(item.recharge_id,item.status,item.money,item.voucher)'>
					<view class="top line-v-center">
						<view class="left">
							<view class="title">充值{{item.value}}</view>
							<view class="time">{{item.audit_time}}</view>
						</view>
						<!-- <view class="btn line-center">{{item.status == 0 ? '上传凭证':'查看详情'}}</view> -->
						<view class="btn line-center" v-if='item.status == 0 && !item.voucher'>上传凭证</view>
						<view class="btn line-center" v-else-if='item.status == 0 && item.voucher'>重新上传凭证</view>
						<view class="btn line-center" v-else>查看凭证</view>
					</view>
					<view class="b line-v-center">
						<view>付款金额：{{item.money}}元</view>
						<view>{{item.stateName}}</view>
					</view>
				</view>
				<loading :loadEnd='loadEnd' class="load-t"></loading>
			</view>
			<no-data v-else class="noData"></no-data>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				page: 1,
				totalPage: 1,
				list: [],
				loadEnd: false,
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getList()
			} else {
				return;
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.totalPage = 1;
			this.list = [];
			this.loadEnd = false;
			this.getList();
			uni.stopPullDownRefresh()
		},
		methods:{
			getList(){
				const that = this;
				app.globalRequest({
					api:app.getApi().recharge.getRechargeList,
					data:{
						page: that.page,
						limits: 15
					}
				}).then(res=>{
					if(res.code == 0){
						that.list = that.list.concat(res.data.data);
						that.totalPage = res.data.last_page;
						if (that.totalPage == that.page) {
							that.loadEnd = true;
						}
					}
				})
			},
			toDetail(id,status,num,voucher){
				if(status == 0){
					uni.navigateTo({
						url:`/pages/upload-credentials/upload-credentials?id=${id}&voucher=${voucher}`
					})
				}else if(status == 1){
					uni.navigateTo({
						url:`/pages/recharge-vouvher/recharge-vouvher?voucher=${voucher}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/recharge-vouvher/recharge-vouvher?voucher=${voucher}`
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background: #F6F7FB;
	}
	.wrap{
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
	.list-wrap{
		margin:0 24rpx 0;
		.list-item{
			padding:24rpx 0rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
			.top{
				padding:0 28rpx 40rpx;
				justify-content: space-between;
				border-bottom: 1px solid #F5F7F9;
				.title{
					font-weight: bold;
				}
				.time{
					font-size: 24rpx;
					color: #787878;
					padding-top:8rpx;
				}
				.btn{
					min-width: 176rpx;
					height: 56rpx;
					padding:0 20rpx;
					box-sizing: border-box;
					background: #1C1C1C;
					border-radius: 28rpx;
					color:#fff;
				}
			}
			.b{
				padding:20rpx 28rpx 0;
				font-size: 24rpx;
				color: #787878;
				margin-top:12rpx;
				justify-content: space-between;
			}
		}
	}

</style>
